<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <title>发现</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4803307_hsage5e3gw.css">
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="./css/discover.css">
</head>
<body>
    <header>
        <p class="fcc mt-20">发现</p>
        <div class="head bg-fff mt-20">
            <nav class="flex jc-sa">
                <a onclick="changeNav(1);" class="link active f16 f888 fw-b" href="#">活动</a>
                <a onclick="changeNav(2);" class="link f16 f888 fw-b" href="#">商城</a>
            </nav>
        </div>
    </header>

    <div style="height: 106px;"></div>

    <div class="carousel">
        <div class="swiper">
            <img src="./img/activity.png" alt="" class="swiper-image">
            <img src="./img/activity2.png" alt="" class="swiper-image">
        </div>
        <!-- 圆点 -->
        <div class="swiper-dots"></div>
    </div>

    <main>
        <!-- 列表 -->
        <ul class="list" id="discoverList">
            <!-- <li class="item w100p bg-fff flex aic">
                <img src="./img/activity.png" alt="">
                <div class="right">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </li> -->
        </ul>

    </main>

    <footer>
        <div class="bg-fff flex jc-sa fixed w100p">
            <a class="link flex fdc aic jc-c f888" href="./index.html">
                <i class="iconfont icon-huibenyuedu f22"></i>
                <span class="pt-5 f12">绘本</span>
            </a>
            <a class="link flex fdc aic jc-c f888" href="./bookshelf.html">
                <i class="iconfont icon-wodeshujia f22"></i>
                <span class="pt-5 f12">书架</span>
            </a>
            <a class="link active flex fdc aic jc-c f888" href="./discover.html">
                <i class="iconfont icon-faxian f22"></i>
                <span class="pt-5 f12">发现</span>
            </a>
            <a class="link flex fdc aic jc-c f888" href="./my.html">
                <i class="iconfont icon-gerenzhongxin f22"></i>
                <span class="pt-5 f12">我的</span>
            </a>
        </div>
    </footer>

    <script src="./js/swiper.js"></script>
    <script src="./js/axios.js"></script>
    <script src="./js/jquery.js"></script>
    <script>
        // 切换导航栏
        function changeNav(index) {
            document.querySelector('nav .active').classList.remove('active');
            document.querySelector(`nav .link:nth-child(${index})`).classList.add('active');

            setTimeout(function () {
                // 根据index的值去跳转
                if (index === 1) {
                    location.href = 'discover.html';
                } else if (index === 2) {
                    location.href = 'shop.html'; // 假设商城页面是 shop.html
                }
            }, 200)
        }

        // 获取发现列表数据
        function getDiscoverList() {
            var url = 'http://localhost:3001/discover';
            axios.get(url).then(function (res) {
                renderDiscoverList(res.data);
            }).catch(function (err) {
                console.error('请求失败', err);
                $('#discoverList').html('<li class="item w100p bg-fff flex aic">请求失败，请稍后再试</li>');
            });
        }

        // 渲染发现列表
        function renderDiscoverList(list) {
            var htmlStr = '';
            if (list.length === 0) {
                htmlStr = '<li class="item w100p bg-fff flex aic">没有更多内容了</li>';
            } else {
                list.forEach(function (item) {
                    htmlStr += `
                        <li class="item w100p bg-fff flex aic">
                            <img src="${item.imgUrl}" alt="">
                            <div class="right">
                                <p class="f18 fw-b" style="color="black";">${item.name}</p>
                                <p class="f14 f888">${item.date}</p>
                                <p class="f14 f888">${item.place}</p>
                            </div>
                        </li>
                    `;
                });
            }
            $('#discoverList').html(htmlStr);
        }

        // 页面加载时获取发现列表
        $(document).ready(function() {
            getDiscoverList();
        });
    </script>
</body>
</html>